<extend name="public@base5" />
<block name="main">
<style>
    .detail-card {
        display: flex;
        padding: 20px;
        .icon {
            margin-right: 10px;
        }
        .right-title {
            font-size: 16px;
            font-weight: bold;
        color: lightgray;
        }
        .right-value {
            font-size: 20px;
        }
        .change-value {
            margin-left: 20px;
            font-size: 15px;
        }
    }
    
    .category {
        font-weight: bold;
        color: grey;
        display: inline-block;
        margin-right: 10px;
    }
    .selected {
        color: blue;
    }
    .list {
        display: none;
    }
    .list.active {
        display: block;
    }
    /* 数据项样式 */
    .data-item {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        overflow: hidden;
        background-color: whitesmoke;
    }
    .data-item img {
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 10px;
        border-radius: 5px;
    }
    .data-item .info {
        overflow: hidden;
        padding: 5px;
        font-weight: bold;
    }
    .data-item .info .title {
        font-size: 14px;
    }
    .data-item .info .num {
        color: grey;
        font-size: 12px;
    }
    .data-item .info .item_id {
        float: right;
    }
</style>
<div class="row" style="font-size: 14px;">
    <div class="col-9 row row-deck row-cards">
        <div class="col-6">
            <div class="card">
                <div class="card-body row">
                    <div class="subheader">销售额分类占比</div>
                    <div id="sales_classification_proportion" style="height:300px;"></div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body row">
                    <div class="subheader">销售漏斗</div>
                    <div id="sales_funnel" style="height:300px;"></div>
                </div>
            </div>
        </div>
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <div class="h3">{$total_collection_sale_sum}</div>
                            <div class="subheader">藏品累计销售额</div>
                        </div>
                        <div class="col-2">
                            <div class="h3">{$total_product_sale_sum}</div>
                            <div class="subheader">商品累计销售额</div>
                        </div>
                        <div class="col-8" style="text-align: right;">
                            <select id="accumulated_sales_select">
                                <option value="option_month">月统计</option>
                                <option value="option_week">周统计</option>
                                <option value="option_day">日统计</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div id="accumulated_sales_month" style="height:260px;"></div>
                            <div id="accumulated_sales_week" style="height:260px;"></div>
                            <div id="accumulated_sales_day" style="height:260px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="h3"> </div>
                            <div class="subheader" style="font-weight: bold;">Hi, 已为您细分各板块数据。</div>
                        </div>
                        <div class="col-12 row">
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_sale_sum.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计总销售额</div>
                                        <div class="right-value">{$total_sale_sum}
                                            <if condition="$today_sale_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_sale_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_sale_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_order_num.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计订单</div>
                                        <div class="right-value">{$total_order_count}
                                            <if condition="$today_order_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_order_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_order_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_product_sale_num.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计商品销量</div>
                                        <div class="right-value">{$total_product_num}
                                            <if condition="$today_product_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_product_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_product_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_product_sale_sum.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计商品售额</div>
                                        <div class="right-value">{$total_product_sale_sum}
                                            <if condition="$today_product_sale_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_product_sale_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_product_sale_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_collection_sale_num.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计藏品销量</div>
                                        <div class="right-value">{$total_collection_num}
                                            <if condition="$today_collection_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_collection_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_collection_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="detail-card">
                                    <img class="icon" src="__TMPL__/public/assets/images/total_collection_sale_sum.png" width='50' height='50'/>
                                    <div>
                                        <div class="right-title">累计藏品售额</div>
                                        <div class="right-value">{$total_collection_sale_sum}
                                            <if condition="$today_collection_sale_change gt 0">
                                                <span class="change-value" style="color: green;">今日：+{$today_collection_sale_change}</span>
                                            <else/>
                                                <span class="change-value" style="color: red;">今日：{$today_collection_sale_change}</span>
                                            </if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body row">
                    <div class="col-4">
                        <div class="subheader">订单数据统计</div>
                    </div>                    
                    <div class="col-8" style="text-align: right;">
                        <select id="order_num_statistics_select">
                            <option value="option_month">月统计</option>
                            <option value="option_week">周统计</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <div id="order_num_statistics" style="height:260px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-3 row row-deck row-cards">
        <div class="card">
            <div class="card-body row" style="flex: 0 0 auto;">
                <div class="col-4">
                    <div class="subheader">销量排行榜</div>
                </div>
                <div class="col-8" style="text-align: right;">
                    <select id="selectOption">
                        <option value="collection">藏品</option>
                        <option value="product">商品</option>
                    </select>
                </div>
                <div class="col-12 row" style="margin-top: 10px;">
                    <div id="categories">
                        <div class="category" id="today">今日</div>
                        <div class="category" id="thisWeek">本周</div>
                        <div class="category" id="thisMonth">本月</div>
                    </div>
                </div>
                <div class="col-12" style="margin-top: 10px;">
                    <div id="content">
                        <div id="dataList">
                            <!-- 数据将由 JavaScript 动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="__TMPL__/public/assets/js/echarts.js"></script>

    <script type="text/javascript">

        // 销售额分类占比
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}'
            },
            
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: [20, 140],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                    data: {$sales_classification_proportion}
                }
            ]
        };
        var salesClassificationProportion = echarts.init(document.getElementById('sales_classification_proportion'));
        salesClassificationProportion.setOption(option);

        // 销售漏斗
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
                }
            },

            series: [
                {
                name: '',
                type: 'funnel',
                left: '10%',
                top: 50,
                bottom: 0,
                width: '60%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                    fontSize: 20
                    }
                },
                data: {$sales_funnel}
                }
            ]
        };
        var salesFunnel = echarts.init(document.getElementById('sales_funnel'));
        salesFunnel.setOption(option);
        
        // 累计销售额
        function getAccumulatedSalesOption(type=1) {
            var source = [];
            if (type == 1) {
                source.push({$year_month_date});
                source.push({$this_year_collection_sale_data});
                source.push({$last_year_collection_sale_data});
                source.push({$this_year_product_sale_data});
                source.push({$last_year_product_sale_data});
            }
            else if (type == 2) {
                source.push({$week_date});
                source.push({$this_week_collection_sale_data});
                source.push({$last_week_collection_sale_data});
                source.push({$this_week_product_sale_data});
                source.push({$last_week_product_sale_data});
            }
            else {
                source.push({$day_date});
                source.push({$this_day_collection_sale_data});
                source.push({$last_day_collection_sale_data});
                source.push({$this_day_product_sale_data});
                source.push({$last_day_product_sale_data});
            }
            return {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: source
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    top: '16%',
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    }
                ]
            };
        }
        echarts.init(document.getElementById('accumulated_sales_month')).setOption(getAccumulatedSalesOption(1));
        echarts.init(document.getElementById('accumulated_sales_week')).setOption(getAccumulatedSalesOption(2));
        echarts.init(document.getElementById('accumulated_sales_day')).setOption(getAccumulatedSalesOption(3));
        document.getElementById('accumulated_sales_month').style.display = 'block';
        document.getElementById('accumulated_sales_week').style.display = 'none';
        document.getElementById('accumulated_sales_day').style.display = 'none';
        document.addEventListener("DOMContentLoaded", function() {
            var selectElement = document.getElementById("accumulated_sales_select");
            selectElement.addEventListener("change", function() {
                console.log("Selected value:", this.value);
                if (this.value == "option_month") {
                    document.getElementById('accumulated_sales_month').style.display = 'block';
                    document.getElementById('accumulated_sales_week').style.display = 'none';
                    document.getElementById('accumulated_sales_day').style.display = 'none';
                    echarts.init(document.getElementById('accumulated_sales_month')).setOption(getAccumulatedSalesOption(1));
                }
                else if (this.value == "option_week") {
                    document.getElementById('accumulated_sales_month').style.display = 'none';
                    document.getElementById('accumulated_sales_week').style.display = 'block';
                    document.getElementById('accumulated_sales_day').style.display = 'none';
                    echarts.init(document.getElementById('accumulated_sales_week')).setOption(getAccumulatedSalesOption(2));
                }
                else {
                    document.getElementById('accumulated_sales_month').style.display = 'none';
                    document.getElementById('accumulated_sales_week').style.display = 'none';
                    document.getElementById('accumulated_sales_day').style.display = 'block';
                    echarts.init(document.getElementById('accumulated_sales_week')).setOption(getAccumulatedSalesOption(3));
                }
                // echarts.init(document.getElementById('accumulated_sales')).setOption(getAccumulatedSalesOption(this.value == "option_month" ? 1 : 2));
            });
        });

        // 订单数据统计
        function getOrderNumStatisticsOption(type=1) {
            var sourceCollection = [];
            var sourceProduct = [];
            var xDate = [];
            if (type == 1) {
                xDate = {$year_month_date_12};
                sourceCollection = {$this_year_collection_sale_num};
                sourceProduct = {$this_year_product_sale_num};
            }
            else {
                xDate = {$week_date7};
                sourceCollection = {$this_week_collection_sale_num};
                sourceProduct = {$this_week_product_sale_num};
            }
            return option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['藏品', '商品']
                },
                calculable: true,
                xAxis: [
                    {
                    type: 'category',
                    data: xDate
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                        name: '藏品',
                        type: 'bar',
                        data: sourceCollection
                    },
                    {
                        name: '商品',
                        type: 'bar',
                        data: sourceProduct
                    }
                ]
            };
        }
        echarts.init(document.getElementById('order_num_statistics')).setOption(getOrderNumStatisticsOption());
        document.addEventListener("DOMContentLoaded", function() {
            var selectElement = document.getElementById("order_num_statistics_select");
            selectElement.addEventListener("change", function() {
                console.log("Selected value:", this.value);
                echarts.init(document.getElementById('order_num_statistics')).setOption(getOrderNumStatisticsOption(this.value == "option_month" ? 1 : 2));
            });
        });
    </script>

<script>
    // 数据对象，存储藏品和商品的数据
    const data = {
        collection: {
            today: {$today_collection_sale_rank},
            thisWeek: {$this_week_collection_sale_rank},
            thisMonth: {$this_month_collection_sale_rank}
        },
        product: {
            today: {$today_product_sale_rank},
            thisWeek: {$this_week_product_sale_rank},
            thisMonth: {$this_month_product_sale_rank}
        }
    };

    // 获取下拉菜单
    const dropdown = document.getElementById('selectOption');

    // 为下拉菜单添加改变事件
    dropdown.addEventListener('change', updateList);

    // 为每个分类添加点击事件
    const categories = document.querySelectorAll('.category');
    categories.forEach(category => {
        category.addEventListener('click', () => {
            // 移除之前选中的分类的选中效果
            categories.forEach(c => c.classList.remove('selected'));
            // 添加选中效果到当前分类
            category.classList.add('selected');
            updateList();
        });
    });

    // 更新列表数据
    function updateList() {
        const selectedCategory = document.querySelector('.category.selected').id;
        const selectedOption = dropdown.value;
        const dataList = data[selectedOption][selectedCategory];
        const dataListContainer = document.getElementById('dataList');
        dataListContainer.innerHTML = '';
        dataList.forEach(item => {
            const dataItem = document.createElement('div');
            dataItem.classList.add('data-item');
            dataItem.innerHTML = `
                <img src="${item.item_icon}" alt="avatar">
                <div class="info">
                    <div class="title">${item.item_name}</div>
                    <div class="num">
                        总销量：${item.sale_num}
                        <span class="item_id">(${item.id})</span>
                    </div>
                </div>
            `;
            dataListContainer.appendChild(dataItem);
        });
    }

    // 初始化列表数据为藏品的今日数据
    document.getElementById('today').classList.add('selected');
    updateList();
</script>
</block>